<template>
  <div>
    <el-form :inline="true" size="small">
      <el-form-item label="使用情况">
        <el-select
          v-model="serviceId"
          filterable
          placeholder="请选择使用情况"
          clearable
        >
          <el-option
            v-for="item in deviceStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上报时间">
        <el-date-picker
          v-model="createdTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          clearable
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item style="margin-left: 10px">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="search"
          style="margin-right: 10px"
          >搜索</el-button
        >
        <el-button
          type="info"
          icon="el-icon-refresh-right"
          size="small"
          @click="reset"
          >重置</el-button
        >
      </el-form-item>
      <el-table
        :data="searchList.length > 0 ? searchList : dataDiaryList"
        tooltip-effect="dark"
        border
        fit
        :default-sort="{ prop: 'createdTime', order: 'descending' }"
        :header-cell-style="{ background: '#fafafa' }"
        max-height="780"
        style="margin-top: 1rem"
      >
        <el-table-column
          prop="timestamp"
          align="center"
          label="上报时间"
          width="150"
        >
        </el-table-column>
        <el-table-column align="center" width="120" label="类型">
          <template slot-scope="{ row }">
            {{ dictChange(row.serviceId) }}
          </template>
        </el-table-column>
        <el-table-column label="数据" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <el-row v-for="(item, key) in row.serviceData" :key="key"
              >{{ key }}: {{ item }}</el-row
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="{ row }">
            <el-button type="text" @click="detail(row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <el-dialog
      title="数据日志详情"
      :visible.sync="showDialog"
      width="30%"
      :close-on-click-modal="false"
    >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="类型">
          {{ dictChange(dataDiaryDetail.serviceId) }}
        </el-descriptions-item>
        <el-descriptions-item label="上报时间">{{
          dataDiaryDetail.timestamp
        }}</el-descriptions-item>
        <el-descriptions-item label="数据">
          <el-row v-for="(item, key) in dataDiaryDetail.serviceData" :key="key"
            >{{ key }}: {{ item }}</el-row
          >
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import list from '../../device-list'
import dataMonitorApi from '@/api/data-monitor.js'
export default {
  name: 'DataDiary',
  props: {
    dataDiaryList: {
      type: Array,
      default: [],
    },
    id: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      serviceId: '',
      createdTime: '',
      showDialog: false,
      dataDiaryDetail: { serviceData: '', timestamp: '' },
      deviceStatusList: list.RecDataSearchArray.deviceStatusList,
      searchList: [],
    }
  },
  mounted() {},
  methods: {
    // 查询列表
    search() {
      let createdTimeFrom = null,
        createdTimeTo = null
      if (Array.isArray(this.createdTime)) {
        createdTimeFrom = this.createdTime[0]
        createdTimeTo = this.createdTime[1]
      }
      const params = {
        id: this.id,
        serviceId: this.serviceId,
        createdTimeFrom: createdTimeFrom,
        createdTimeTo: createdTimeTo,
      }
      dataMonitorApi.getSmokeDeviceDetail(params).then((res) => {
        if (res.status === 200) {
          this.searchList = res.data.data.equipmentMonitorLogList
        }
      })
    },
    // 重置
    reset() {
      this.searchList = []
      this.serviceId = ''
      this.createdTime = ''
    },
    // 打开详情
    detail(row) {
      this.showDialog = true
      this.dataDiaryDetail = row
      //   console.log(this.dataDiaryDetail, '查看详情')
    },
    // 字典转换
    dictChange(val) {
      let label = list.RecDataSearchArray.deviceStatusList.find((_val) => {
        return val == _val.value
      })
      if (label) {
        return label.label
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.mt-3 {
  margin-top: 30px;
}
.flex {
  display: flex;
}
.flex-direction {
  flex-direction: column;
}
</style>
